<template>
    <div class="map_box">
        <div v-show="show" class="map_box_zz"></div>
        <div ref="cesiumbox" class="map_viewer"></div>
    </div>
</template>


<script setup>
import { EarthInit } from '../../utils/earth'
import { ref, onMounted, onBeforeUnmount } from 'vue'
// 地图公共属性方法的存储位置
import earthData from './earthData'

import loginPage from './cmder/login'

const cesiumbox = ref(null)

// 地图实例
let earth = null
// 页面canvas实例
let canvas = null
// 当前页面指令实例
let pageObj = null
// 遮罩控制  防止操作抖动
let show = ref(false)

onMounted(() => {
    mapInit()
})

onBeforeUnmount(() => {
    // vue程序销毁时，需要清理相关资源
    modelDestroy()
    earth = earth && earth.destroy()
})

// 全部指令列表
const cmderList = {
    login: () => {
        pageObj = new loginPage()
        pageObj.init()
    }
}

// 对外暴露属性
defineExpose({
    cmderList,
})

// 创建地图
const mapInit = () => {
    earth = EarthInit(cesiumbox.value, {
        // tdtKey: '6e7da064e115af35182d92ad4264a6de'
    })
    // 获取canvas实例
    canvas = earth.czm.viewer.canvas

    let mvvm2 = XE.MVVM.watch(earth.camera, 'flying', () => {
        if (earth.camera.flying) {
            show.value = true
        } else {
            show.value = false
        }
    })

    earthData.mvvmList.push(mvvm2)
    earthData.earth = earth
    earthData.canvas = earth.czm.viewer.canvas
}

const modelDestroy = () => {
    // 销毁页面实例
    if (pageObj) {
        pageObj.modelDestroy()
        pageObj = null
    }
    earthData.modelDestroy()
}

</script>

<style scoped>
.map_box,
.map_viewer {
    width: 100%;
    height: 100%;
}

.map_box {
    position: relative;
}

.map_box_zz {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}
</style>
